#include ("/_includes/_layout.html")
#define css()
<style type="text/css">
.wizard-big.wizard > .content{
    min-height: 450px;
}
.t-step{ display: table; overflow: hidden; width: 100%; box-sizing: border-box; border: 1px solid #e7eaec; border-left: 0; border-radius: 3px;}
.t-steps{ display: table-cell; padding: 6px; position: relative; padding-left: 65px; border-left: 1px solid #ddd;}
.t-steps:before,.t-steps:after{position: absolute; z-index: 2;content: ''; display: block; top: 50%; margin-top: -13px; right:-20px; border:solid; border-width:13px 10px; border-color:transparent transparent transparent #ccc;}
.t-steps:after{ border-color:transparent transparent transparent #fff; right: -19px; z-index: 3;}
.t-steps i,.t-steps span{ position: absolute; left: 20px; display: inline-block; line-height: 30px; top: 50%; margin-top: -15px;}
.t-steps i{ font-size: 30px; display:none;}
.t-steps.complete i{ display: block; color: #1AB394;}
.t-steps.complete span{ display: none;}
.t-steps span{ width: 28px; height: 28px; line-height: 28px; border: 1px solid #999; color: #999; font-size: 18px; text-align: center; border-radius: 50%; box-sizing: border-box;}
.t-steps.active{ background: #1AB394; color: #fff;}
.t-steps.active i{ display:none;}
.t-steps.active span{ border-color: #fff; color: #fff;}
.t-steps.active:before,.t-steps.active:after{ border-color:transparent transparent transparent #1AB394;}
.t-steps.disabled{ color: #999; background: #f9f9f9;}
.t-steps.disabled:after{ border-color:transparent transparent transparent #f5f5f5;}
.t-steps h2{ font-size: 16px;}
</style>
#end
#@layout("设置体验者", "wxmall,点步科技", "Wxmall社区","wxmall") 
#define content()
<div class="wrapper wrapper-content">
	   <div class="container-fluid">
	   	 <div class="row">
	  		 <div class="ibox col-sm-12">
				<div class="ibox-content">
					<div class="t-step">
		                <div class="t-steps complete"> 
		                    <span class="t-steps-n">1</span>
		                    <i class="fa fa-check-circle"></i>
		                    <h2>选择模板</h2>
		                </div>
		                <div class="t-steps active">
		                    <span class="t-steps-n">2</span>
		                    <i class="fa fa-check-circle"></i>
		                    <h2>设置体验者</h2>
		                </div> 
		                <div class="t-steps disabled">
		                    <span class="t-steps-n">3</span>
		                    <i class="fa fa-check-circle"></i>
		                    <h2>预览新版</h2>
		                </div>
		                 <div class="t-steps disabled">
		                    <span class="t-steps-n">4</span>
		                    <i class="fa fa-check-circle"></i>
		                    <h2>提交审核</h2>
		                </div>
		            </div>
		            
		            <div class="panel-body">
		            <a id="bindWeappUser" href="javascript:void(0)" class="btn btn-success">绑定体验者微信号</a>
		            </div>
		            <table id="mainTable" class="table table-striped table-bordered bootstrap-datatable datatable">
	                    <thead>
	                        <tr>
	                            <th>微信号</th>
	                            <th>添加时间</th>
	                            <th>操作</th>
	                        </tr>
	                    </thead>
	                    <tbody class="itemsLotGrid"></tbody>
	                </table>
	                
	                <div class="panel-body" style="text-align: center;">
	                <a class="btn btn-default btn-sm" href="#(webctx)/weapp/sets/step1">上一步</a>
		            <a href="#(webctx)/weapp/sets/step3" class="btn btn-success btn-sm">下一步</a>
		            </div>
				</div>
		   </div>
	     </div>		
	</div>
</div>

<!-- html 模板文件 -->
<script type="text/template" id="item_table_tr_tpl">
{{each data as item i}}
	<tr class="package">
        <td><span class="line">{{item.wxUser}}</span></td>
        <td>{{item.updated}}</td>
		<td><a id="showTy_{{item.wx_user}}" href="javascript:void(0)" style="text-decoration: underline;">解绑</a></td>
    </tr>	
{{/each}}
</script>
<script type="text/template" id="table_noresult_tr_tpl">
	<tr class="package"><td colspan="3" class="center">没有结果集</td></tr>
</script>
#end
<script type="text/javascript">
var TableOpt = {
	unbind : function(param){
		obz.showMessage("确定解绑吗?", function(){
			var id = param[1];
			$("#mainTable").mask("处理中...");	
			obz.ajaxJson("#(webctx)/weapp/sets/unbindtest", {"wxuser":id}, function(resp){
				$("#mainTable").unmask();
				if(resp.code == 200){
					obz.msg("解绑成功!", function(){
						location.reload();
					});				
				}
			});
		});
	}, 
	init : function(){
		var optArray = new Array();
		optArray.push(this.unbind);
		return optArray;
	}
} 
function listTesters(){
	$(".itemsLotGrid").mask("加载中...");
	obz.ajaxJson(obz.ctx+"/weapp/sets/listTester", {}, function(resp){
		$(".itemsLotGrid").unmask();
		$('.itemsLotGrid').html(template('item_table_tr_tpl', resp));
		TBatch.initOptEvent(TableOpt.init());
	});
}
listTesters();

var testerdialog = null;
$("#bindWeappUser").click(function(){
	testerdialog = BootstrapDialog.show({
		size: BootstrapDialog.SIZE_LARGE,
		title: "添加体验者",
        message: $('<div></div>').load("#(webctx)/weapp/sets/tobindtest")
    });
});
</script>